<template>
  <div class="add-user-tool" v-if="addUserToolStatus.status">
    <div class="info">
      <div class="avatar">
        <img v-if="friendInfo.headimgurl" :src="friendInfo.headimgurl" alt="用户头像">
        <img v-else src="@/assets/images/avatar.jpg" alt="用户头像">
      </div>
      <div class="details">
        <div class="name">{{ friendInfo.username }}</div>
        <div class="address">地区：{{ friendInfo.city }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="btn">添加到通讯录</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useAddUserToolStatusStore} from '@/stores/addUserToolStatus.ts';
import {ref} from "vue";

let addUserToolStatus = useAddUserToolStatusStore();

//好友信息
let friendInfo = ref({})

function showTool(obj) {
  friendInfo.value = obj;
  addUserToolStatus.status = true;
}

//将方法暴露给父组件调用
defineExpose({showTool})
</script>

<style scoped lang="scss">
.add-user-tool {
  width: 300px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  border-radius: 5px;
  padding: 16px;

  .info {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px solid #dbdbdb;

    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .details {
      display: flex;
      flex-direction: column;
      flex: 1;

      .name {
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
      }

      .address {
        font-size: 14px;
        line-height: 20px;
        color: #aaa;
      }
    }
  }

  .footer {
    padding-top: 32px;
    display: flex;
    justify-content: center;

    .btn {
      padding: 0 16px;
      line-height: 44px;
      height: 44px;
      background: #07c160;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }
  }

}
</style>